.liter {
  .banner {
    width: 100%;
    img {
      display: inline-block;
      width: 100%;
    }
  }
  // 动画
  .fade-enter {
    opacity: 0;
    transform: scale(0.9);
  }
  .fade-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 3000ms, transform 3000ms;
  }
  .fade-exit {
    opacity: 1;
  }
  .fade-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 3000ms, transform 3000ms;
  }
  .handbills {
    .liter {
      background-color: #4091ed;
      .title-top {
        color: #fff;
        font-size: 30px;
      }
      .title-bottom {
        color: #c4c4c4;
      }
    }
    .handbills-content {
      width: 900px;
      margin: 70px auto 0;
      opacity: 1;
      transform: translateX(0);
      transition: opacity 1000ms, transform 1000ms;
      .hand-item {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
        // height: 290px;
        .item-img {
          background-color: #333;
          padding: 34px;
          width: 378px;
          img {
            display: inline-block;
            width: 228px;
          }
          .item-title {
            margin-top: 24px;
            display: flex;
            font-size: 20px;
            .left {
              color: #fff;
            }
            .right {
              color: #4586ff;
            }
          }
        }
        .item-details {
          background-color: #aaa;
          width: 520px;
          position: relative;
          .item-details-content {
            padding: 64px 16px 0 100px;
            color: #fff;
          }
          .item-btn {
            position: absolute;
            background-color: #bdd4ff;
            color: #000;
            width: 285px;
            text-align: center;
            height: 54px;
            line-height: 54px;
            bottom: 28px;
            left: 24%;
          }
        }
      }
      .hand-item:nth-child(2n) {
        flex-direction: row-reverse;
      }
    }
  }
  .little-story {
    .liter {
      background-color: #c1d6f2;
      .title-top {
        color: #000;
        font-size: 30px;
      }
      .title-bottom {
        color: #a3a9b0;
      }
    }
    .little-story-content {
      background-color: #f2f2f2;
      padding-top: 30px;
      .content-inst {
        display: flex;
        flex-wrap: wrap;
        width: 900px;
        margin: auto;
        justify-content: space-between;
      }

      .little-story-item {
        margin-bottom: 16px;
        width: 255px;
        // height: 240px;
        background-color: #cccccc;
        position: relative;
        padding-bottom: 60px;
        img {
          display: inline-block;
          width: 255px;
          height: 148px;
        }
        .little-story-item-title {
          padding: 20px 0 0 30px;
          color: #ce8297;
        }
        .little-story-item-details {
          padding: 16px 0px 0 30px;
          width: 184px;
        }
        .little-story-item-btn {
          position: absolute;
          bottom: 14px;
          right: 24px;
          background-color: #0064ff;
          display: inline-block;
          padding: 2px 4px;
        }
      }
    }
  }
}
